<script setup>
import Header from '@/components/header/App.vue'
import Breadcrumb from '@/components/breadcrumb/App.vue'
import Sidebar from '@/components/sidebar/App.vue'
import Footer from '@/components/footer/App.vue'
import {ref} from 'vue'

const galleryList = ref([
  {
    name: '张书记听取基地建设情况汇报',
  },
  {
    name: '张书记参观创新实验室',
  },
  {
    name: '张书记与入驻企业代表交流',
  }])
const mediaList = ref([
  {
    name: '省委书记张伟考察濮阳人工智能基地',
    content: '河南日报头版报道了省委书记张伟考察濮阳人工智能创新应用示范基地的相关情况，重点介绍了基地在推动区域创新发展方面的工作成效。',
    time: '河南日报 | 2025年7月16日'
  },
  {
    name: '张伟：打造人工智能创新高地',
    content: '河南电视台新闻联播报道了省委书记张伟考察濮阳人工智能基地的详细情况，并播出了张书记的重要讲话。',
    time: '河南电视台 | 2025年7月15日'
  },
  {
    name: '张伟：打造人工智能创新高地',
    content: '河南电视台新闻联播报道了省委书记张伟考察濮阳人工智能基地的详细情况，并播出了张书记的重要讲话。',
    time: '河南电视台 | 2025年7月15日'
  },
  {
    name: '张伟：打造人工智能创新高地',
    content: '河南电视台新闻联播报道了省委书记张伟考察濮阳人工智能基地的详细情况，并播出了张书记的重要讲话。',
    time: '河南电视台 | 2025年7月15日'
  }
])
const photoGalleryList = ref([
  {
    name: '李强省长听取基地规划汇报',
  },
  {
    name: '李强省长查看建设工地',
  },
  {
    name: '李强省长与建设者交流',
  }])
const photoCheckList = ref([
  {
    name: '王刚书记检查施工现场',
  },
  {
    name: '王刚书记查看消防设施',
  }])
</script>

<template>
  <Header></Header>
  <div class="details">
    <h1 class="page-title">领导关怀</h1>
    <p class="page-subtitle">各级领导对濮阳人工智能创新应用示范基地的关心指导和支持</p>
    <div class="leader-section">
      <h2 class="section-title">领导考察</h2>
      <p>濮阳人工智能创新应用示范基地的建设和发展得到了各级领导的高度重视和亲切关怀。</p>

      <div class="visit-list">
        <!-- 考察1 -->
        <div class="visit-item">
          <div class="visit-header">
            <h3 class="visit-title">省委书记张伟一行莅临基地考察指导</h3>
            <div class="visit-date">2025年7月15日</div>
          </div>

          <div class="visit-content">
            <div class="visit-text">
              <p>
                7月15日，省委书记张伟率领省委省政府相关部门负责人莅临濮阳人工智能创新应用示范基地考察指导工作。张书记详细了解了基地建设运营情况，对基地在推动区域创新发展方面取得的成绩给予充分肯定。</p>
              <p>
                考察期间，张书记参观了基地展示中心、创新实验室和入驻企业办公区，与基地管理人员和入驻企业代表进行了深入交流，并就下一步发展方向提出了指导意见。</p>
              <p>
                张书记强调，要充分发挥人工智能在产业转型升级中的引领作用，加快技术研发和成果转化，为全省高质量发展提供有力支撑。</p>
            </div>
            <img src="@/assets/img/static/nuandong_sj.png" alt="省委书记考察" class="visit-image">
          </div>

          <h4>考察照片</h4>
          <div class="photo-gallery">
            <div class="gallery-item" v-for="(item, index) in galleryList" :key="index">
              <img src="@/assets/img/static/nuandong_sj.png" alt="考察照片" class="gallery-image">
              <div class="gallery-caption">
                <p>{{ item.name }}</p>
              </div>
            </div>
          </div>

          <h4>媒体报道</h4>
          <div class="media-list">
            <div class="media-item" v-for="(item, index) in mediaList" :key="index">
              <img src="@/assets/img/static/nuandong_sj.png" alt="新闻报道" class="media-image">
              <div class="media-content">
                <h3>{{ item.name }}</h3>
                <p class="media-source">{{ item.time }}</p>
                <p>{{ item.content }}</p>
                <a href="javascript:;">查看报道 →</a>
              </div>
            </div>
          </div>
        </div>

        <!-- 考察2 -->
        <div class="visit-item">
          <div class="visit-header">
            <h3 class="visit-title">省长李强调研基地建设工作</h3>
            <div class="visit-date">2025年6月10日</div>
          </div>

          <div class="visit-content">
            <div class="visit-text">
              <p>
                6月10日，省长李强率省直有关部门负责人到濮阳人工智能创新应用示范基地调研建设工作。李强省长实地查看了基地建设进展，详细了解基地规划布局、功能定位和运营模式。</p>
              <p>
                调研中，李强省长强调，要高标准推进基地建设，聚焦人工智能核心技术攻关和应用场景创新，打造具有区域影响力的创新平台。要充分发挥基地的辐射带动作用，促进人工智能与实体经济深度融合。</p>
              <p>
                李强省长还现场办公，协调解决基地建设过程中遇到的困难和问题，要求有关部门加大支持力度，确保基地早日建成投用。</p>
            </div>
            <img src="@/assets/img/static/nuandong_sj.png" alt="省长调研" class="visit-image">
          </div>

          <h4>调研照片</h4>
          <div class="photo-gallery">
            <div class="gallery-item" v-for="(item, index) in photoGalleryList" :key="index">
              <img src="@/assets/img/static/nuandong_sj.png" alt="调研照片" class="gallery-image">
              <div class="gallery-caption">
                <p>{{ item.name }}</p>
              </div>
            </div>
          </div>

          <h4>媒体报道</h4>
          <div class="media-list">
            <div class="media-item">
              <img src="@/assets/img/static/nuandong_sj.png" alt="新闻报道" class="media-image">
              <div class="media-content">
                <h3>李强调研濮阳人工智能基地建设</h3>
                <p class="media-source">河南日报 | 2025年6月11日</p>
                <p>河南日报报道了省长李强调研濮阳人工智能创新应用示范基地建设工作的相关情况。</p>
                <a href="javascript:;">查看报道 →</a>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <Footer></Footer>
  </div>
</template>

<style scoped>
.details {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 页面标题 */
.page-title {
  font-size: 32px;
  text-align: center;
  margin: 40px 0;
  color: #1e5799;
  position: relative;
  padding-bottom: 20px;
}

.page-title:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: #207cca;
}

.page-subtitle {
  text-align: center;
  font-size: 18px;
  color: #666;
  max-width: 800px;
  margin: 0 auto 50px;
  line-height: 1.8;
}

/* 领导关怀内容区 */
.leader-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 24px;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
  color: #1e5799;
  position: relative;
}

.section-title:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 80px;
  height: 2px;
  background: #207cca;
}

/* 领导考察列表 */
.visit-list {
  margin-top: 30px;
}

.visit-item {
  margin-bottom: 50px;
}

.visit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.visit-title {
  font-size: 22px;
  color: #1e5799;
}

.visit-date {
  color: #207cca;
  font-weight: bold;
  font-size: 16px;
}

.visit-content {
  display: flex;
  margin-bottom: 20px;
}

.visit-text {
  flex: 1;
  font-size: 16px;
  color: #555;
  line-height: 1.8;
}

.visit-image {
  width: 400px;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
  margin-left: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 图片展示区 */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.gallery-item {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.gallery-item:hover {
  transform: translateY(-5px);
}

.gallery-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.gallery-caption {
  padding: 15px;
  background-color: white;
}

.gallery-caption p {
  color: #666;
  font-size: 14px;
  text-align: center;
}

/* 视频展示 */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
  overflow: hidden;
  margin: 30px 0;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* 媒体报道 */
.media-list {
  margin-top: 30px;
}

.media-item {
  display: flex;
  margin-bottom: 30px;
  background-color: #f9fbff;
  border-radius: 8px;
  overflow: hidden;
}

.media-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

.media-content {
  flex: 1;
  padding: 20px;
}

.media-content h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #1e5799;
}

.media-content .media-source {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}

.media-content p {
  color: #555;
  font-size: 15px;
  line-height: 1.8;
}

.media-content a {
  display: inline-block;
  margin-top: 15px;
  color: #207cca;
  text-decoration: none;
  font-weight: bold;
}
</style>